
import { defineComponent, PropType, reactive, ref } from "vue";
import { KEEP_VIDEO_TOP } from "~/src/config";
import Pagination from "../Pagination";

import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import router from "@/router";
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";

export interface hyType {
    HB_ID: string,
    HD: string,
    HDNAME: string,
    JZ_SJ: string,
    ROWUNM_: number,
    hyStatus: string,
}

export default defineComponent({

    emits: ["selectData"],
    setup(props, { emit, slots }) {
        const id1 = ref(-1)//改变当前选中号码颜色
        const id2 = ref(-1)//改变当前选中上午下午颜色

        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080

        const swdata = reactive<hyType[]>([
            {HB_ID: "153314",HD: "153314-1",HDNAME: "上午1号",JZ_SJ: "07:30",ROWUNM_: 1,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-2",HDNAME: "上午2号",JZ_SJ: "08:00",ROWUNM_: 2,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-3",HDNAME: "上午3号",JZ_SJ: "08:30",ROWUNM_: 3,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-4",HDNAME: "上午4号",JZ_SJ: "09:00",ROWUNM_: 4,hyStatus: "满"},
            {HB_ID: "153314",HD: "153314-5",HDNAME: "上午5号",JZ_SJ: "09:30",ROWUNM_: 5,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-6",HDNAME: "上午6号",JZ_SJ: "10:00",ROWUNM_: 6,hyStatus: "满"},
            {HB_ID: "153314",HD: "153314-7",HDNAME: "上午999号",JZ_SJ: "10:30",ROWUNM_: 7,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-8",HDNAME: "上午8号",JZ_SJ: "11:00",ROWUNM_: 8,hyStatus: "满"},
            {HB_ID: "153314",HD: "153314-9",HDNAME: "上午 9号",JZ_SJ: "11:30",ROWUNM_: 9,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-10",HDNAME: "上午10号",JZ_SJ: "12:00",ROWUNM_: 10,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-11",HDNAME: "上午11号",JZ_SJ: "12:30",ROWUNM_: 11,hyStatus: "满"},
            {HB_ID: "153314",HD: "153314-12",HDNAME: "上午12号",JZ_SJ: "13:00",ROWUNM_: 12,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-13",HDNAME: "上午 1号",JZ_SJ: "14:00",ROWUNM_: 13,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-14",HDNAME: "上午 2号",JZ_SJ: "14:30",ROWUNM_: 14,hyStatus: "满"},
            {HB_ID: "153314",HD: "153314-15",HDNAME: "上午 3号",JZ_SJ: "15:00",ROWUNM_: 15,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-16",HDNAME: "上午 4号",JZ_SJ: "15:30",ROWUNM_: 16,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-17",HDNAME: "上午 5号",JZ_SJ: "16:00",ROWUNM_: 17,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-18",HDNAME: "上午 6号",JZ_SJ: "16:30",ROWUNM_: 18,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-19",HDNAME: "上午 7号",JZ_SJ: "17:00",ROWUNM_: 19,hyStatus: "满"},
            {HB_ID: "153314",HD: "153314-20",HDNAME: "上午 8号",JZ_SJ: "18:30",ROWUNM_: 20,hyStatus: "正常"},

        ])
        const xwdata = reactive<hyType[]>([
            {HB_ID: "153314",HD: "153314-1",HDNAME: "下午1号",JZ_SJ: "14:30",ROWUNM_: 1,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-2",HDNAME: "下午2号",JZ_SJ: "15:00",ROWUNM_: 2,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-3",HDNAME: "下午3号",JZ_SJ: "15:30",ROWUNM_: 3,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-4",HDNAME: "下午4号",JZ_SJ: "16:00",ROWUNM_: 4,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-5",HDNAME: "下午5号",JZ_SJ: "16:30",ROWUNM_: 5,hyStatus: "满"},
            {HB_ID: "153314",HD: "153314-6",HDNAME: "下午6号",JZ_SJ: "17:00",ROWUNM_: 6,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-7",HDNAME: "下午7号",JZ_SJ: "17:30",ROWUNM_: 7,hyStatus: "满"},
            {HB_ID: "153314",HD: "153314-8",HDNAME: "下午8号",JZ_SJ: "18:00",ROWUNM_: 8,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-9",HDNAME: "下午9号",JZ_SJ: "18:30",ROWUNM_: 9,hyStatus: "满"},
            {HB_ID: "153314",HD: "153314-10",HDNAME: "下午110号",JZ_SJ: "19:00",ROWUNM_: 10,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-11",HDNAME: "下午11号",JZ_SJ: "19:30",ROWUNM_: 11,hyStatus: "满"},
            {HB_ID: "153314",HD: "153314-12",HDNAME: "下午12号",JZ_SJ: "20:00",ROWUNM_: 12,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-13",HDNAME: "下午 1号",JZ_SJ: "21:00",ROWUNM_: 13,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-14",HDNAME: "下午 2号",JZ_SJ: "21:30",ROWUNM_: 14,hyStatus: "满"},
            {HB_ID: "153314",HD: "153314-15",HDNAME: "下午 3号",JZ_SJ: "22:00",ROWUNM_: 15,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-16",HDNAME: "下午 4号",JZ_SJ: "22:30",ROWUNM_: 16,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-17",HDNAME: "下午 5号",JZ_SJ: "23:00",ROWUNM_: 17,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-18",HDNAME: "下午 6号",JZ_SJ: "23:30",ROWUNM_: 18,hyStatus: "正常"},
            {HB_ID: "153314",HD: "153314-19",HDNAME: "下午 11117号",JZ_SJ: "00:00",ROWUNM_: 19,hyStatus: "满"}
        ])
        const showDatas = ref<hyType[]>([])
        // 2. 定义【当前激活的数据源】，初始值设为上午数据（swdata）
        const activeData = ref<hyType[]>(swdata);
        // 初始化时激活“上午”标签
        id2.value = 1;
        // 3. 上午/下午切换事件：更新activeData和标签激活状态
        const handleTabChange = (tabType: 'morning' | 'afternoon') => {
            if (tabType === 'morning') {
                activeData.value = swdata; // 切换为上午数据
                id2.value = 1; // 激活上午标签
            } else {
                activeData.value = xwdata; // 切换为下午数据
                id2.value = 2; // 激活下午标签
            }
            id1.value = -1; // 重置“选中时段”的激活状态
        };


        // 分页组件数据更新
        const handlePageChange = (Datas:any) => {
            showDatas.value = Datas;
        };
        // ✅ 整合后的点击事件处理函数
        const handleClick = (item: hyType, index: number) => {
            if (item.hyStatus !== '满') {
                id1.value = index;
                const breadcrumbStore = useBreadcrumbStore(); // 实例化Pinia存储
                breadcrumbStore.addTitle(item.HDNAME+' '+item.JZ_SJ); // ✅ 使用编号作为Breadcrumb标题
                router.push({
                    path: '/qrxx',
                    query: {
                        // hyNo: item.hyNo,
                        // hyTime: item.hyTime,
                        // hyStatus: item.hyStatus,
                    }
                });
            }
        };


        return () => <div class={Style.container}>
            <div class={Style.containStyle}>
                <div class={Style.sxw}>
                    <div class={[Style.tag_sxw, Style.fontStyle, id2.value == 1 ? Style.tag_active : ""]}
                        onClick={() => handleTabChange('morning')}
                    >
                        <div >上午</div>
                    </div>
                    <div class={[Style.tag_sxw, Style.fontStyle, id2.value == 2 ? Style.tag_active : ""]}
                        onClick={() => handleTabChange('afternoon')}
                    >
                        <div >下午</div>
                    </div>
                </div>
                <div class={Style.outer}>
                    {
                        showDatas.value.map((e, index) =>
                            <div id={`act${index}`}
                                 class={[e.hyStatus == '满' ?
                                    Style.tag_disable :
                                    Style.tag, Style.fontStyle, id1.value == index ?
                                    Style.tag_active : "",
                                 ]}
                                 style={{margin:"10px 5px"}}
                                 onClick={() => handleClick(e, index)}
                            >
                                {e.hyStatus != '满' ? <div>{e.HDNAME}</div> : ""}
                                <div style={{ marginLeft: "5px" }}>{e.JZ_SJ}</div>
                                {e.hyStatus == '满' ? <div style={{ marginLeft: "25px" }}>{e.hyStatus}</div> : ""}

                            </div>
                        )
                    }
                </div>
            </div>
            <Pagination
                style={{padding: "0 64px"}}
                pageSize={16}
                Data={activeData.value}
                onPageChange={handlePageChange}
            />
        </div>
    }
})
